<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投保完成 - 液化气用户家财险</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <!-- 状态提示 -->
    <div class="bg-white p-6 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-50 text-green-600 mb-4">
            <i class="fas fa-check-circle text-[32px]"></i>
        </div>
        <h1 class="text-[20px] font-bold mb-2">投保信息提交成功</h1>
        <p class="text-[15px] text-gray-600">订单状态：<span id="orderStatus" class="text-blue-600 font-medium">待生效</span></p>
    </div>

    <!-- 投保信息 -->
    <div class="mt-2">
        <!-- 产品与期间 -->
        <div class="bg-white p-4 space-y-3">
            <h2 class="text-[17px] font-bold">投保信息</h2>
            <div class="grid grid-cols-1 gap-3 text-[15px] text-gray-700">
                <div class="flex flex-wrap gap-6">
                    <div><span class="text-gray-500">产品名称：</span><span id="productName" class="font-medium">液化气用户家财险</span></div>
                    <div><span class="text-gray-500">保险公司：</span><span id="insurer" class="font-medium">人保财险</span></div>
                    <div><span class="text-gray-500">保险期间：</span><span id="periodText" class="font-medium">1年</span></div>
                    <div><span class="text-gray-500">保险起期：</span><span id="startText" class="font-medium"></span></div>
                    <div><span class="text-gray-500">保险止期：</span><span id="endText" class="font-medium"></span></div>
                    <div><span class="text-gray-500">投保份数：</span><span id="quantityText" class="font-medium"></span></div>
                </div>
            </div>
        </div>

        <!-- 方案与保障责任 -->
        <div class="bg-white mt-2 p-4">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-[17px] font-bold">保障方案</h2>
                <div class="text-[15px] text-gray-700">已选择：<span id="planName" class="font-semibold text-blue-600">A款</span></div>
            </div>
            <div id="planContent" class="space-y-2 text-[15px]"></div>
        </div>

        <!-- 企业信息/个人信息 -->
        <div class="bg-white mt-2 p-4 space-y-4">
            <h2 id="entityTitle" class="text-[17px] font-bold">企业信息</h2>
            <div class="grid grid-cols-1 gap-3 text-[15px] text-gray-700">
                <div id="rowName" class="py-1.5"><span class="text-gray-500">企业名称：</span><span id="corpName" class="font-medium"></span></div>
                <div class="flex flex-wrap gap-6 py-1.5">
                    <div><span class="text-gray-500">证件类型：</span><span id="corpCertType" class="font-medium"></span></div>
                    <div><span class="text-gray-500">证件号码：</span><span id="corpCertNo" class="font-medium"></span></div>
                </div>
                <div id="groupOnly1" class="flex flex-col gap-2">
                    <span class="text-gray-500">证件图片：</span>
                    <img id="corpCertImg" src="" alt="证件图片" class="w-full h-[200px] object-contain bg-gray-50 border rounded" onerror="this.classList.add('hidden')">
                </div>
                <div id="groupOnly2" class="flex flex-col gap-2">
                    <span class="text-gray-500">投保声明缩略图：</span>
                    <div id="declThumb" class="w-full h-[120px] bg-gray-50 border rounded flex items-center justify-center text-gray-600">
                        <i class="fas fa-file-pdf text-red-500 mr-2"></i>
                        <span id="declName">暂无文件</span>
                        <span id="declSize" class="ml-2 text-gray-400 text-[13px]"></span>
                    </div>
                </div>
                <div id="groupOnly3" class="py-1.5"><span class="text-gray-500">营业执照登记住所：</span><span id="corpAddr" class="font-medium"></span></div>
                <div id="groupOnly4" class="flex flex-wrap gap-6 py-1.5">
                    <div><span class="text-gray-500">联系人姓名：</span><span id="contactName" class="font-medium"></span></div>
                    <div><span class="text-gray-500">手机号码：</span><span id="contactPhone" class="font-medium"></span></div>
                    <div><span class="text-gray-500">电子邮箱：</span><span id="contactEmail" class="font-medium"></span></div>
                </div>
            </div>
        </div>



        <!-- 总保费 -->
        <div class="bg-white mt-2 p-4">
            <div class="text-[15px] text-gray-700">
                总保费：<span id="totalPremium" class="text-red-600 font-bold">0</span> 元
            </div>
        </div>
    </div>

    <!-- 底部固定栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t p-4">
        <button onclick="goToOrders()" class="w-full h-[44px] bg-blue-600 text-white rounded-full text-[15px]">确定</button>
    </div>

    <script>


        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 检查是否需要显示人工核保状态
            const needsManualReview = Math.random() < 0.3; // 模拟30%概率需要人工核保
            if(needsManualReview){
                document.getElementById('orderStatus').textContent = '待人工核保';
            }

            // 产品与期间
            const start = localStorage.getItem('startDate') || '';
            const end = localStorage.getItem('endDate') || '';
            document.getElementById('startText').textContent = start.replace('T',' ');
            document.getElementById('endText').textContent = end.replace('T',' ');
            document.getElementById('periodText').textContent = localStorage.getItem('insurancePeriodLabel') || '1年';
            document.getElementById('productName').textContent = localStorage.getItem('productName') || '液化气用户家财险';
            document.getElementById('insurer').textContent = localStorage.getItem('insurer') || '人保财险';
            document.getElementById('quantityText').textContent = (localStorage.getItem('insuranceQuantity') || '1') + '份';

            // 方案与保费
            const plan = localStorage.getItem('selectedPlan') || 'basic';
            const planName = localStorage.getItem('planName') || '基础款';
            document.getElementById('planName').textContent = planName;
            renderPlan(plan);
            const totalPremium = localStorage.getItem('totalPremium') || '10';
            document.getElementById('totalPremium').textContent = totalPremium;

            // 用户类型分支
            const userType = localStorage.getItem('userType') || 'group';
            document.getElementById('entityTitle').textContent = userType === 'group' ? '企业信息' : '投保人信息';
            if (userType === 'group') {
                try {
                    const corp = JSON.parse(localStorage.getItem('enterpriseInfo') || '{}');
                    document.getElementById('corpName').textContent = corp.enterpriseName || '';
                    document.getElementById('corpCertType').textContent = corp.enterpriseCertTypeText || '';
                    document.getElementById('corpCertNo').textContent = corp.enterpriseCertNumber || '';
                    if (corp.licenseImg) {
                        document.getElementById('corpCertImg').src = corp.licenseImg;
                        document.getElementById('corpCertImg').classList.remove('hidden');
                    }
                    document.getElementById('declName').textContent = corp.declarationFileName || '暂无文件';
                    document.getElementById('declSize').textContent = corp.declarationFileSize ? '(' + corp.declarationFileSize + ')' : '';
                    document.getElementById('corpAddr').textContent = corp.enterpriseAddress || '';
                    document.getElementById('contactName').textContent = corp.contactName || '';
                    document.getElementById('contactPhone').textContent = corp.contactPhone || '';
                    document.getElementById('contactEmail').textContent = corp.contactEmail || '';
                } catch(e) {}
            } else {
                // 个人用户，改动标签"企业名称"为"投保人姓名"
                document.querySelector('#rowName span.text-gray-500').textContent = '投保人姓名：';
                // 隐藏团体专属字段
                document.getElementById('groupOnly1').classList.add('hidden');
                document.getElementById('groupOnly2').classList.add('hidden');
                document.getElementById('groupOnly3').classList.add('hidden');
                document.getElementById('groupOnly4').classList.add('hidden');
                try {
                    const person = JSON.parse(localStorage.getItem('personalInfo') || '{}');
                    document.getElementById('corpName').textContent = person.personName || '';
                    document.getElementById('corpCertType').textContent = person.idTypeText || '';
                    document.getElementById('corpCertNo').textContent = person.idNumber || '';
                    // 补充显示性别/出生日期和燃气险特有字段
                    const wrap = document.querySelector('#entityTitle').parentElement.querySelector('.grid');
                    const extra = document.createElement('div');
                    extra.className = 'flex flex-wrap gap-6 py-1.5';
                    extra.innerHTML = `
                        <div><span class="text-gray-500">性别：</span><span class="font-medium">${person.genderText || ''}</span></div>
                        <div><span class="text-gray-500">出生日期：</span><span class="font-medium">${person.birthDate || ''}</span></div>
                        <div><span class="text-gray-500">手机号：</span><span class="font-medium">${person.phone || ''}</span></div>
                        <div><span class="text-gray-500">电子邮箱：</span><span class="font-medium">${person.email || ''}</span></div>`;
                    wrap.appendChild(extra);
                    
                    // 液化气险特有字段
                    const gasInfo = document.createElement('div');
                    gasInfo.className = 'py-1.5';
                    gasInfo.innerHTML = `<span class="text-gray-500">液化气用户（卡）号：</span><span class="font-medium">${person.gasUserNumber || ''}</span>`;
                    wrap.appendChild(gasInfo);
                    
                    // 被保险家庭地址
                    const addressInfo = document.createElement('div');
                    addressInfo.className = 'py-1.5';
                    addressInfo.innerHTML = `<span class="text-gray-500">被保险家庭地址：</span><span class="font-medium">${person.address?.fullAddress || ''}</span>`;
                    wrap.appendChild(addressInfo);
                } catch(e) {}
            }


        });

        function renderPlan(plan){
            const content = document.getElementById('planContent');
            
            // 液化气用户家财险保障方案
            if (plan === 'basic') {
                content.innerHTML = `
                    <div class="space-y-2">
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">保障期间</span><span class="font-medium">1年</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">投保年龄</span><span class="font-medium">18周岁(含)-90周岁(含)</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">室内财产损失</span><span class="font-medium text-red-600">5万/户</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故残疾及意外医疗（三者）</span><span class="font-medium text-red-600">2万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故/残疾</span><span class="font-medium text-red-600">2万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">意外医疗</span><span class="font-medium text-red-600">5000元/人</span></div>
                    </div>`;
            } else if (plan === 'upgrade') {
                content.innerHTML = `
                    <div class="space-y-2">
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">保障期间</span><span class="font-medium">1年</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">投保年龄</span><span class="font-medium">18周岁(含)-90周岁(含)</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">室内财产损失</span><span class="font-medium text-red-600">10万/户</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故残疾及意外医疗（三者）</span><span class="font-medium text-red-600">5万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故/残疾</span><span class="font-medium text-red-600">5万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">意外医疗</span><span class="font-medium text-red-600">1万/人</span></div>
                    </div>`;
            } else if (plan === 'premium') {
                content.innerHTML = `
                    <div class="space-y-2">
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">保障期间</span><span class="font-medium">1年</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">投保年龄</span><span class="font-medium">18周岁(含)-90周岁(含)</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">室内财产损失</span><span class="font-medium text-red-600">20万/户</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故残疾及意外医疗（三者）</span><span class="font-medium text-red-600">10万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故/残疾</span><span class="font-medium text-red-600">10万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">意外医疗</span><span class="font-medium text-red-600">2万/人</span></div>
                    </div>`;
            } else {
                // 默认显示基础款
                content.innerHTML = `
                    <div class="space-y-2">
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">保障期间</span><span class="font-medium">1年</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">投保年龄</span><span class="font-medium">18周岁(含)-90周岁(含)</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">室内财产损失</span><span class="font-medium text-red-600">5万/户</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故残疾及意外医疗（三者）</span><span class="font-medium text-red-600">2万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故/残疾</span><span class="font-medium text-red-600">2万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">意外医疗</span><span class="font-medium text-red-600">5000元/人</span></div>
                    </div>`;
            }
        }



        // 跳转到订单列表
        function goToOrders(){
            window.location.href = 'orders.html';
        }
    </script>
</body>
</html>